<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	template="template/template.xhtml" xmlns:p="http://primefaces.org/ui">
	<ui:define name="title">Map view page</ui:define>

	<ui:define name="script">
		<script type="text/javascript"
			src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC80gJ_EoZC85ldSivv6UO4NuKpBJ0KG-A&amp;sensor=false">
			
		</script>


		<script type="text/javascript">
		
		
				var serviceId;

				var map;
				var marker;
				var markersArray = [];
				var currentMarker;
				var currentPhone = -1;
				var intervalId = 0;
				var info;
			function acceptTaxi(id) {
				var xmlhttp;
				if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
					xmlhttp = new XMLHttpRequest();
				} else {// code for IE6, IE5
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
					if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200)
						{
						 	alert(xmlhttp.responseText);
							clearInterval ( intervalId );
							clearOverlays();
							newMarker = new google.maps.Marker({
							    position: currentMarker.getPosition() ,
							    map: map
							  });
							google.maps.event.addListener(newMarker, 'click', function(){
								var r = confirm("You have already picked up this customer ? Are you sure?");
								if(r==true)
								{
									
									pickUp(serviceId);
									newMarker.setMap(null);
								}
									
								
							});
						}
				}
				xmlhttp.open("GET", "AcceptServlet?phone=" + currentPhone, true);
				xmlhttp.send();

			}
			
			
			function pickUp(id)
			{
				var xmlhttp;
				if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
					xmlhttp = new XMLHttpRequest();
				} else {// code for IE6, IE5
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
					if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200)
						{
							alert(xmlhttp.responseText);
							//document.getElementById("load").innerHTML=xmlhttp.responseText;
							clearOverlays();
							newMarker = new google.maps.Marker({
							    position: currentMarker.getPosition() ,
							    map: map
							  });
							google.maps.event.addListener(newMarker, 'click', function(){
								var r = confirm("You have already finish your job ? Are you sure?");
								if(r==true)
								{
									
									finishJob(serviceId);
									newMarker.setMap(null);
							
									
									
								}
									
								
							});
							
						}
				}
				xmlhttp.open("GET", "PickUpServlet?" + "id=" + id , true);
				xmlhttp.send(null);
			}
			
			
			
			////////////////finished job
			function finishJob(id)
			{
				var xmlhttp;
				if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
					xmlhttp = new XMLHttpRequest();
				} else {// code for IE6, IE5
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
					if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200)
						{
							alert(xmlhttp.responseText);
							newMarker.setMap(null);
							intervalId = setInterval(function() {
								var xhr = new XMLHttpRequest();
								xhr.onreadystatechange = function() {
									if (xhr.readyState == 4) {
										var data = xhr.responseText;
										if(data!="")
										{	
											var info = data.split(",");
											var phone = info[2];
											if(currentPhone!=phone)
											{
												currentPhone = phone;
												latlong = new google.maps.LatLng(info[0], info[1]);
												placeMarker(latlong,id);
											}
										}

									}
								}

								xhr.open('GET', 'RequestDataServlet', true);
								xhr.send(null);
							}, 3000);
							
						}
				}
				xmlhttp.open("GET", "FinishJobServlet?" + "id=" + id , true);
				xmlhttp.send(null);
			}
			
			
			
			
			
			
			
			
			/////////////////clear  over clay
			// Removes the overlays from the map, but keeps them in the array
			function clearOverlays() {
  				if (markersArray) {
    				for (i in markersArray) {
      					markersArray[i].setMap(null);
    				}
  				}
			}
			///initial map
			function initialize() {
				var myLatlng = new google.maps.LatLng(10.759733781795981,
						106.68211162090302);
				var mapOptions = {
					zoom : 17,
					center : myLatlng,
					mapTypeId : google.maps.MapTypeId.ROADMAP
				}
				map = new google.maps.Map(document.getElementById("map"),
						mapOptions);
				
				intervalId = setInterval(function() {
					var xhr = new XMLHttpRequest();
					xhr.onreadystatechange = function() {
						if (xhr.readyState == 4) {
							
							var data = xhr.responseText;
							if(data!="")
							{	
								var info = data.split(",");
								var phone = info[2];
								if(currentPhone!=phone)
								{
									currentPhone = phone;
									latlong = new google.maps.LatLng(info[0], info[1]);
									placeMarker(latlong,phone);
								}
							}
							

						}
					}

					xhr.open('GET', 'RequestDataServlet', true);
					xhr.send(null);
				}, 3000);

			}

			function placeMarker(location,phone) {
				var marker = new google.maps.Marker({
					position : location,
					animation : google.maps.Animation.DROP,
					map : map,
					title : phone
				});
				markersArray.push(marker);
				map.panTo(marker.getPosition());
				
				google.maps.event.addListener(marker, 'click', function() {
					currentMarker = marker;
					serviceId = marker.getTitle();
					var r = confirm("You chose this customer with phone number  "
							+ currentPhone
							+ "? Are you sure!");
					if (r == true) {
						acceptTaxi(serviceId);
					}
				});

				//map.setCenter(location);
			}
			google.maps.event.addDomListener(window, 'load', initialize);
			google.maps.event.addListener(marker, "click", confirmDialog());
			function toggleBounce() {

				if (marker.getAnimation() != null) {
					marker.setAnimation(null);
				} else {
					marker.setAnimation(google.maps.Animation.BOUNCE);
				}
			}

			function createMarker(pos) {
				var marker = new google.maps.Marker({
					position : pos,
					map : m, // google.maps.Map 
					title : t
				});
				google.maps.event.addListener(marker, 'click', function() {
					confirm("You chose this customer? Are you sure!");
				});
				return marker;
			}
		</script>



	</ui:define>

	<ui:define name="menu">
		<ul>
			<li><a href='welcome.jsf'><span>Home</span></a></li>
			<li class="active"><a href='map-view.jsf'><span>Map</span></a></li>
			<li><a href='taxi.jsf'><span>Taxi</span></a></li>
			<li><a href='customer.jsf'><span>Customer</span></a></li>
			<li><a href='user.jsf'><span>User</span></a></li>
			<li><a href='service.jsf'><span>Service</span></a></li>
		</ul>
	</ui:define>

	<ui:define name="main-content">
		<div id="map" style="width: 960px; height: 600px"></div>
		<div id="load"></div>



	</ui:define>

</ui:composition>




